<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item v-model="defaultVal" title="综合" :options="option1" />
      <van-dropdown-item v-model="priceVal" @change="priceChange" title="价格" :options="option2" />
      <van-dropdown-item v-model="categoryVal" @change="categoryChange" title="分类" :options="filterCategory" />
    </van-dropdown-menu>
    <van-empty v-if="goodsList.length === 0" image="search" description="无更多商品"></van-empty>
    <ProductList v-else :goodsList="goodsList" />
  </div>
</template>

<script>
import ProductList from './ProductList.vue'
export default {
  components: { ProductList },
  props: ['goodsList', 'filterCategory'],
  data () {
    return {
      // 这是哪一项的value，这一项就会被勾选
      categoryVal: 0,
      priceVal: '',
      defaultVal: 'a',
      option1: [
        { text: '综合', value: 'a' }
      ],
      option2: [
        { text: '价格由高到低', value: 'desc' },
        { text: '价格由低到高', value: 'asc' }
      ]
    }
  },
  mounted() {
    // 遍历filterCategory，看哪一项的checked为true
    // 当某一项为true时把categoryVal改成这项的value
    this.filterCategory.forEach(item => {
      if (item.checked) {
        this.categoryVal = item.value
      }
    })
  },
  methods: {
    // 下拉框选项改变时触发
    categoryChange(value) {
      // console.log(value)
      this.$emit('categoryChange', value)
    },
    // 价格排序改变
    priceChange(value) {
      // console.log(value)
      this.$emit('priceChange', value)
    }
  }
}
</script>

<style lang='less' scoped>

</style>
